<template>
  <div>
  头部模块
    <ul>
      <li class="test" v-for="(item,index) in list" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import {defineComponent, watch} from "vue"
export default defineComponent({
    name: "Head",
    props: {
      list: {
        type: Array,
        defalut: () => {
          return []
        }
      }
    },
    setup(props) {


        watch(() => props.list,(newVal) => {
          console.log("监听：",newVal);
          
        },{
          immediate: true,
          deep: true
        })
        return {

        }
    }
});
</script>
<style scoped>
 .test {
  padding: 10px 5px;
  border: 1px solid red;
  color: skyblue;
 }
 ul li {
  list-style-type: none;
 }
</style>